﻿@page "/color-picker/default-functionalities"

@using Syncfusion.Blazor.Inputs
@inherits SampleBaseComponent

<SampleDescription>
    <p>This sample demonstrates the default functionalities of the ColorPicker with default colors and predefined styles.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>ColorPicker</code> is a user interface to select and adjust color values. This supports various color specifications like RGB(Red Green Blue), HSV (Hue Saturation Value), and Hex codes.</p>
   <p> In this sample, the ColorPicker popup contains picker area, slider to adjust hue and opacity value, input textarea, and control buttons.</p>
        <ul><li>Drag the handle in the Picker area to select your favorite color.</li>
            <li>You can manually set the color by typing the color values in the input text boxes</li>
            <li>By clicking the format switching icon at the right side of the input text area, switch between rgb and hsv color value format.</li>
            <li>By clicking the mode switching icon at the left bottom of the popup, switch between picker and palette type.</li>
            <li>Using the <a target="_blank" href="https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value">Value</a> property, set the color value to picker and palette initially.</li>
        </ul>
   <p> In mobile mode, the popup opens at the center of the viewport.</p>
   <p> More information about Blazor ColorPicker component can be found in this <a target="_blank" href="https://blazor.syncfusion.com/documentation/color-picker/getting-started/">documentation</a> section.</p>
</ActionDescription>

<div class="control-section">
    <div id="default-control">
        <h4>Choose a color</h4>
        <SfColorPicker></SfColorPicker>
    </div>
</div>

<style>
    #default-control {
        margin: 30px auto;
        padding-top: 50px;
        text-align: center;
    }
    #default-control .row {
        width: 100%;
    }
    #default-control h4 {
        color: rgba(0, 0, 0, 0.64);
        margin-bottom: 20px;
    }
    .highcontrast #default-control h4 {
        color: rgba(255, 255, 255, 0.64);
    }
    .mobile #default-control h4 {
        font-size: 20px;
    }
</style>
